<template>
	<main-container v-loading="loading">
		<el-tabs v-model="active" class="demo-tabs">
			<el-tab-pane label="全店风格" name="1"></el-tab-pane>
			<el-tab-pane label="底部导航" name="2"></el-tab-pane>
		</el-tabs>
		<div class="theme-flex" v-if="active == '1'">
			<div style="display: flex">
				<div class="demo-goods-ui" style="margin-right: 20px">
					<div class="goods-header" v-if="mobiletheme.themeColor" :class="'bg-' + mobiletheme.themeColor">
						<div class="backText">返回</div>
						<div class="title">商品详情</div>
					</div>
					<div class="goods-img">
						<el-image
							style="height: 200px; width: 100%"
							src="https://huanxing.oss-cn-beijing.aliyuncs.com/lijx/d256cde2-208a-4ec9-84bb-851f5d2a82e0.png"
							fit="cover"
							:preview-teleported="true"
						></el-image>
					</div>
					<div class="goods-price" v-if="mobiletheme" :class="'text-' + mobiletheme.themeColor">
						<span>￥4188-4888</span>
					</div>
					<div class="goods-name">HUAWEI P50 原色双影像单元 搭载HarmonyOS 2 万象双环设计 支持66W超级快充</div>
					<el-row class="goods-specs">
						<el-col :span="4">
							<div>选择</div>
						</el-col>
						<el-col :span="16">
							<div>颜色/属性</div>
							<div class="item">
								<div>
									<el-image
										style="height: 30px; width: 30px"
										src="https://huanxing.oss-cn-beijing.aliyuncs.com/lijx/d256cde2-208a-4ec9-84bb-851f5d2a82e0.png"
										fit="cover"
										:preview-teleported="true"
									></el-image>
								</div>
								<div>
									<el-image
										style="height: 30px; width: 30px"
										src="https://huanxing.oss-cn-beijing.aliyuncs.com/lijx/d256cde2-208a-4ec9-84bb-851f5d2a82e0.png"
										fit="cover"
										:preview-teleported="true"
									></el-image>
								</div>
								<div
									v-if="mobiletheme"
									:class="'bg-' + mobiletheme.themeColor"
									style="height: 20px; lin-height: 20px; font-size: 13px; margin-left: 5px; padding: 2px"
								>
									共2种颜色可选
								</div>
							</div>
						</el-col>
						<el-col :span="4" class="arrow-right">
							<el-icon> <ele-ArrowRight /> </el-icon>
						</el-col>
					</el-row>
					<el-row class="goods-freight">
						<el-col :span="4">
							<div>发货</div>
						</el-col>
						<el-col :span="16">
							<div>辽宁沈阳 | 快递：包邮</div>
						</el-col>
						<el-col :span="4" class="arrow-right">
							<el-icon> <ele-ArrowRight /> </el-icon>
						</el-col>
					</el-row>
					<div class="goods-foot">
						<div class="foot-left">
							<div class="item">
								<el-icon> <ele-HomeFilled /> </el-icon>
								<div>首页</div>
							</div>
							<div class="item">
								<el-icon> <ele-ShoppingCart /> </el-icon>
								<div>购物车</div>
							</div>
						</div>
						<div v-if="mobiletheme">
							<el-button round :class="'bg-' + mobiletheme.matchColor">加入购物车</el-button>
							<el-button round :class="'bg-' + mobiletheme.themeColor">立即购买</el-button>
						</div>
					</div>
				</div>
				<div class="demo-userinfo-ui">
					<div class="userinfo-header" v-if="mobiletheme.themeColor" :class="'bg-' + mobiletheme.themeColor">
						<div class="title">个人中心</div>
					</div>
					<div class="mine-userinfo" :class="'bg-' + mobiletheme.themeColor">
						<div class="mine-userinfo-bg1"></div>
						<div class="mine-userinfo-bg2"></div>
						<div class="mine-userinfo-bg3"></div>
						<div class="mine-userinfo-bg4"></div>
						<div class="info">
							<div class="hx-flex">
								<el-avatar :size="55" src="https://huanxing.oss-cn-beijing.aliyuncs.com/lijx/4371d7d1-8327-41d4-a128-4efab649294b.png" />
								<div class="nick-name">环兴商城</div>
							</div>
							<div>
								<el-icon :size="20"> <ele-Setting /> </el-icon>
							</div>
						</div>
						<div class="user-bottom">
							<div class="icon-text-flex">
								<div class="icon-text-item" style="width: 100px">
									<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
									<div class="text" style="color: #fff">优惠券 1</div>
								</div>
								<div class="icon-text-item" style="width: 100px">
									<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
									<div class="text" style="color: #fff">足迹</div>
								</div>
								<div class="icon-text-item" style="width: 100px">
									<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
									<div class="text" style="color: #fff">余额 ￥10</div>
								</div>
							</div>
						</div>
					</div>
					<div class="order-demo">
						<div class="top">
							<span class="left">我的订单</span>
							<span class="right">查看全部</span>
						</div>
						<div class="icon-text-flex" style="margin-top: 10px" :class="'text-' + mobiletheme.themeColor">
							<div class="icon-text-item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">待付款</div>
							</div>
							<div class="icon-text-item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">待发货</div>
							</div>
							<div class="icon-text-item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">待收货</div>
							</div>
							<div class="icon-text-item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">待评价</div>
							</div>
							<div class="icon-text-item" style="width: 80px">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">退款/售后</div>
							</div>
						</div>
					</div>
					<div class="service-demo">
						<div class="title">我的服务</div>
						<div class="icon-text-flex" style="margin-top: 10px" :class="'text-' + mobiletheme.themeColor">
							<div class="item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">收货地址</div>
							</div>
							<div class="item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">0元夺宝</div>
							</div>
							<div class="item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">我的评价</div>
							</div>
							<div class="item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">我的足迹</div>
							</div>
							<div class="item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">我的收藏</div>
							</div>
							<div class="item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">我的账户</div>
							</div>
							<div class="item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">分销中心</div>
							</div>
							<div class="item">
								<el-icon :size="20"> <ele-WarningFilled /> </el-icon>
								<div class="text">我的拼团</div>
							</div>
						</div>
					</div>
					<div class="version">环兴商城 版权所有 (1.00)</div>
				</div>
			</div>
			<div>
				<div
					v-for="(item, index) in themeList"
					:key="index"
					class="ns-exchange-type"
					:class="{ 'ns-exchange-typ-selected': item.themeColor == mobiletheme.themeColor }"
				>
					<div class="ns-exchange-list" @click="clickTheme(item)">
						<div class="ns-exchange-color">
							<div :class="'bg-' + item.themeColor" class="theme-color"></div>
							<div :class="'bg-' + item.matchColor" class="theme-color"></div>
							<div style="background-color: #fff" class="theme-color"></div>
						</div>
						<div>{{ item.name }}</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="active == '2'">
			<el-row>
				<el-col :span="10" style="margin-top: 20px">
					<el-form :model="mobiletheme" label-width="140px">
						<el-form-item label="tabBar文字默认颜色">
							<el-input v-model="mobiletheme.tabbarColor" clearable>
								<template #append>
									<el-color-picker v-model="mobiletheme.tabbarColor" :predefine="predefineColors" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="tabBar文字选中颜色">
							<el-input v-model="mobiletheme.tabbarSelectedColor" clearable>
								<template #append>
									<el-color-picker v-model="mobiletheme.tabbarSelectedColor" :predefine="predefineColors" />
								</template>
							</el-input>
						</el-form-item>
						<el-form-item label="tabBar上边框颜色">
							<el-select v-model="mobiletheme.tabbarBorderStyle" style="width: 100%" clearable>
								<el-option label="黑色" value="black" />
								<el-option label="白色" value="white" />
							</el-select>
						</el-form-item>
						<el-form-item label="tabBar背景颜色">
							<el-input v-model="mobiletheme.tabbarBgColor" clearable>
								<template #append>
									<el-color-picker v-model="mobiletheme.tabbarBgColor" :predefine="predefineColors" />
								</template>
							</el-input>
						</el-form-item>
					</el-form>
				</el-col>
				<el-col :span="14">
					<div>
						<div
							:style="{ backgroundColor: mobiletheme.tabbarBgColor }"
							class="tabbar-demo"
							v-for="(tabar, tabarIndex) in tabbarItems"
							:key="tabarIndex"
							@mouseover="hoverTabbarIndex = tabar.id"
							@mouseleave="hoverTabbarIndex = -1"
							:class="[{ 'hover-tabbar-demo': tabar.id == hoverTabbarIndex }, { 'selected-tabbar-demo': selectedTabbarId == tabar.id }]"
							@click="selectedTabbar(tabar)"
						>
							<div class="item" v-for="(item, index) in tabar.info" :key="index">
								<div>
									<img style="width: 30px" :src="getAssetsFile('tabbar/' + item.iconPath)" />
									<img style="width: 30px" :src="getAssetsFile('tabbar/' + item.selectedIconPath)" />
								</div>
								<div>{{ item.text }}</div>
							</div>
						</div>
					</div>
				</el-col>
			</el-row>
		</div>
		<div class="bottom-button">
			<el-button type="primary" @click="doEdit" style="width: 20%">保 存</el-button>
		</div>
	</main-container>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { getList, editObj } from '/@/api/mall/mobiletheme';
import { tabbarItems } from './tabbar';
import { themeList } from './theme';
import { ElMessageBox, ElMessage } from 'element-plus';
import { getAssetsFile } from '/@/utils/util';
export default defineComponent({
	setup() {
		const data = reactive({
			loading: false,
			themeList: themeList,
			tabbarItems: tabbarItems,
			mobiletheme: {
				id: '',
				matchColor: '',
				themeColor: '',
				tabbarColor: '',
				tabbarSelectedColor: '',
				tabbarBorderStyle: '',
				tabbarBgColor: '',
				isUse: '',
				tabbarItem: {},
			},
			active: '1',
			hoverTabbarIndex: -1,
			id: '',
			selectedTabbarId: null,
		});

		const predefineColors = ref(['#fe496e', '#13d694', '#bb9c62', '#f9002c', '#1c73f0']);
		/**
		 * 查询全部主题
		 */
		const initPage = async () => {
			data.loading = true;
			await getList()
				.then((response) => {
					let theme = response.data.data[0];
					data.mobiletheme = theme;
					data.id = theme.id;
					data.selectedTabbarId = theme.tabbarItem.id;
					data.loading = false;
				})
				.catch(() => {
					data.loading = false;
				});
		};
		/**
		 * 选择主题
		 */
		const clickTheme = (row: any) => {
			data.mobiletheme = row;
		};
		/**
		 * 修改主题
		 */
		const doEdit = () => {
			data.loading = true;
			data.mobiletheme.isUse = '1';
			data.mobiletheme.id = data.id;
			editObj(data.mobiletheme)
				.then((response) => {
					ElMessage.success('保存成功');
					data.loading = false;
				})
				.catch(() => {
					data.loading = false;
				});
		};
		/**
		 * 选中tabbar样式
		 */
		const selectedTabbar = (row: any) => {
			data.selectedTabbarId = row.id;
			data.mobiletheme.tabbarItem = row;
		};
		initPage();
		return {
			predefineColors,
			clickTheme,
			doEdit,
			selectedTabbar,
			...toRefs(data),
			getAssetsFile,
		};
	},
});
</script>

<style scoped lang="scss">
@import './index.scss';
</style>
